<template>
    <el-dialog v-model="store.addStoreFormVisible" title="添加新门店"  width="35%" center>
        <el-form :model="storeMain" :rules="rules" ref="dom">
          必填 :
            <el-form-item label="门店名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="storeMain.name"/>
            </el-form-item>
            <el-form-item label="门店地址" :label-width="formLabelWidth" prop="address">
                <el-input v-model="storeMain.address"/><el-icon size="25" @click="showMap"><Location /></el-icon>
            </el-form-item>
          选填 :
            <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="storeMain.tel"/>
            </el-form-item>
          <el-form-item label="商户号" :label-width="formLabelWidth" prop="storeId">
            <el-input v-model="storeMain.storeId"/>
          </el-form-item>
            <el-form-item label="付款码支付密钥" :label-width="formLabelWidth">
                <el-input v-model="storeMain.secret_v2" type="password"/>
            </el-form-item>
            <el-form-item label="扫码支付密钥" :label-width="formLabelWidth">
                <el-input v-model="storeMain.secret_v3" type="password"/>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="store.addStoreFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(dom)">
          添加
        </el-button>
      </span>
        </template>
    </el-dialog>

    <BMapAddressSelect ref="bmapAddressSelect" @confirmMapAddress="confirmMapAddress"></BMapAddressSelect>

</template>

<script setup>

import {inject, reactive, ref,} from "vue";
import {store} from "@/store";
import {Location} from "@element-plus/icons-vue";
import BMapAddressSelect from "@/components/common/BMapAddressSelect";
import request from "@/utils/request";
import {message} from "ant-design-vue";
import {ElMessage} from "element-plus";

const formLabelWidth = '140px'

let storeMain = reactive({
    userId:store.getLocalStorage("userMain").id
})

const rules = reactive({
    // storeId:[{required: true, message: '请输入商户号'}],
    name:[{required:true,message:"请输入门店名称"}],
    address:[{required:true,message:"请输入门店地址"}]
})

const bmapAddressSelect=ref()
const dom=ref()


const showMap = () => {
    bmapAddressSelect.value.show();
}

const confirmMapAddress = (address) => {
  console.log(address.city+" "+address.district+" "+address.address)
  if (address.city===address.province)
    storeMain.address=address.city+" "+address.district+" "+address.address
  else
    storeMain.address=address.province+" "+address.city+" "+address.district+" "+address.address
}
const iinject=inject('reload')
const submit = (dom) => {
    dom.validate((isTrue) => {
        if (isTrue) {
            request.post("/store/add/store", storeMain).then(response => {
                if (response.code === 200) {
                  request.get("/store/get/storeList/"+store.getLocalStorage("userMain").id).then(res=>{
                    store.storeList=res.data
                    storeMain=store.storeList.filter((p)=>{
                      return p.storeId===response.data
                    })[0]
                    store.setLocalStorage("currentStoreMain",storeMain)
                    store.addStoreFormVisible = false
                  })
                  // request.get("/goods/get/goodsInfo/"+store.getLocalStorage("currentStoreMain").storeId).then(res=>{
                  //   for (let i in res.data){
                  //     store.setLocalStorage(res.data[i].code,res.data[i])
                  //   }
                  // })
                  iinject()
                } else {
                    console.log(response)
                  ElMessage({
                    message: response.message,
                      type:'error'
                })
                }
            })
        } else {
            console.log("格式有误")
        }
    })
}

</script>

<style scoped>
.el-button--text {
    margin-right: 15px;
}
.el-input {
    width: 300px;
}
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>